<script lang="ts" setup>
    import { House, ArrowRight, Refresh, SemiSelect} from "@element-plus/icons-vue"
    import { reactive, ref } from 'vue'
    import { Dept, Vacationck } from "../model/index";
    import createAxios from "../request";
    import { onMounted } from "vue";
    import userStore from '../store/UserStore';
import { ElMessage } from "element-plus";
    let store = userStore();
let s =store.getDeptno;
    let axios = createAxios();

    let list2:Array<Vacationck> = [];
    let list1:Array<Vacationck> = [];
    let tableData = reactive({
            "list2":list2,
            "list": list1,
            "return":{
              "record_id":0,
              "empno":0,
              "vacation_id":0,
              "duration":0,
            }
        });
        let selectedRows = ref<any[]>([]);
const handleSelectionChange = (val: any[]) => {
  selectedRows.value = val;
};


    const getData = function (){
        axios({
            url: `/Vacationlist2`,
            method: "POST",
            data:s
        }).then((res)=>{
            //请求成功
            tableData.list = res.data;
        }).catch((err)=>{
            //请求失败·
            console.log(err);
        })
    }
    
const agreelist = function (){
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请选择要同意的考勤记录");
    return;
  }
  let ids: Array<Vacationck> = selectedRows.value.map(row => row);
    ids.forEach((item: Vacationck, index: number) => {
      agree(item);
})
        getData();
    }
    const batchRefuse = function () {
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请选择要驳回的考勤记录");
    return;
  }

  let ids: Array<number> = selectedRows.value.map(row => row.record_id);
    ids.forEach((item: number, index: number) => {
      refuse(item);
})

getData();
};
    const refuse = function (record_id:number){
        axios({
            url: `/vacationrefuse`,
            method: "POST",
            data:record_id
        }).then((res)=>{
            //请求成功
            getData();
        }).catch((err)=>{
            //请求失败·
            console.log(err);
        })
        
    }
    const agree = function (vo:Vacationck){
      let data = reactive({
      "return":{
      "record_id":vo.record_id,
    "empno":vo.empno,
    "vacation_id":vo.vacation_id,
      "duration":vo.duration,
    }
});
    alert(vo.duration);
        axios({
            url: `/vacationagree`,
            method: "POST",
            data:data.return
        }).then((res)=>{
            //请求成功
            getData();
        }).catch((err)=>{
            //请求失败·
            console.log(err);
        })
        
    }


    onMounted(() => {
      getData();
    });

    let currentPage = 2
    let gotoFirst = function(){
      currentPage = 1;
    }
    let gotoLast = function(){
      currentPage = tableData.list.length / 10;
    }
</script>

<template>
  <el-container id="mainView">
    <el-header style="background-color: #272822; color: #E5E5E5; line-height: 60px; font-size: 27px;">审批休假</el-header>
    <el-footer style="height: 30px; line-height: 30px; background-color: #4E5246; border-bottom:1px solid #7A7A7A; border-top:1px solid #7A7A7A;">
      <el-breadcrumb :separator-icon="ArrowRight" style="line-height: 30px;">
        <el-breadcrumb-item :to="{ path: '/home/homepage' }"><el-icon><House /></el-icon>首页</el-breadcrumb-item>
        <el-breadcrumb-item>时间管理</el-breadcrumb-item>
        <el-breadcrumb-item>审批休假</el-breadcrumb-item>
      </el-breadcrumb>
    </el-footer>
    <el-main style="padding-bottom: 0%;">
        <div style="padding-bottom: 5px;">
            <el-button type="success" color="#478A24" @click="agreelist" style="margin-bottom: 5px"><el-icon><Refresh /></el-icon>&nbsp;批量同意</el-button>
            <el-button type="danger" color="#B40B42" @click="batchRefuse" style="margin-bottom: 5px"><el-icon><SemiSelect /></el-icon>&nbsp;批量驳回</el-button>
        </div>
        <div class="table">
            
          <el-table :data="tableData.list" style="width: 1500px"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" label="编号" width="55" />
            
            <el-table-column label="姓名" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          
          <span style="margin-left: 10px">{{ scope.row.ename}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="假期类型" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          
          <span style="margin-left: 10px">{{ scope.row.vacation_name}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="时长" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          
          <span style="margin-left: 10px">{{ scope.row.duration}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="开始日期" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          
          <span style="margin-left: 10px">{{ scope.row.start_date}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="结束日期" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          
          <span style="margin-left: 5px">{{ scope.row.end_date}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="原因" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          
          <span style="margin-left: 5px">{{ scope.row.vacation_reason}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="agree(scope.row)" type="success" color="#478A24">
                <el-icon>
                  <Refresh />
                </el-icon>&nbsp;同意
              </el-button>
              <el-button @click="refuse(scope.row.record_id)" type="danger" color="#B40B42">
                <el-icon>
                  <SemiSelect />
                </el-icon>&nbsp;驳回
              </el-button>
      </template>
    </el-table-column>
    
  </el-table>
        </div>
        <div style="display: flex; justify-content: flex-end;">
          <el-button color="#262727" @click="gotoFirst">首页</el-button>&nbsp;&nbsp;
          <el-pagination background layout="prev, pager, next" :total="tableData.list.length" style="text-align: right;" current-page="currenPage" :page-size="1"/>&nbsp;&nbsp;
          <el-button color="#262727" @click="gotoLast">尾页</el-button>
        </div>
    </el-main>
  </el-container>
</template>
  
<style scoped>
    #mainView {
        height: 100%;
        width: 100%;
    }

    .demo-form-inline .el-input {
    --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
    --el-select-width: 220px;
    }

    .table {
      display: flex;
      justify-content: center;
    }

    .example-basic .el-date-editor {
      margin: 8px;
    }

</style>
  